* {
    margin: 0;
    padding: 0;
    font: 12px/24px Arial, "Microsoft Yahei", "宋体", sans-serif;
    list-style: none;
}

header,
main,
.content,
footer {
    display: block;
    width: 980px;
    font-size: 30px;
    margin: 0 auto;
    font-family: "Microsoft yahei";
    text-align: center;
    color: #f9fff9;
    font-weight: bold;
}
header {
    height: 400px;
    background-color: #83c44e;
    line-height: 400px;
}
main {
    position: relative;
}
.content {
    height: 300px;
    line-height: 300px;
}
.content:nth-child(1) {
    background-color: #ffd979;
}
.content:nth-child(2) {
    background-color: #ceff81;
}
.content:nth-child(3) {
    background-color: #a3ffc9;
}
.content:nth-child(4) {
    background-color: #86c7ff;
}
.content:nth-child(5) {
    background-color: #a27cff;
}
.content:nth-child(6) {
    background-color: #ff75f6;
}
.content:nth-child(7) {
    background-color: #ff261c;
}
.content:nth-child(8) {
    background-color: #ff8744;
}
.content:nth-child(9) {
    background-color: #3dff25;
}
.content:nth-child(10) {
    background-color: #6679ff;
}
.content:nth-child(11) {
    background-color: #ff7b99;
}
.content:nth-child(12) {
    background-color: #ffd979;
}
#slide {
    width: 50px;
    height: 500px;
    font-size: 12px;
    color: #020202;
    position: absolute;
    right: -60px;
    top: 0;
    background: #d6f1e4;
    border: 1px solid #ddd;
    font-weight: normal;
    border-radius: 3px;
}
#slide ul:after {
    content: "";
    clear: both;
}
#slide ul li {
    width: 50px;
    height: 32px;
    line-height: 32px;
    transition: 0.2s;
    cursor: pointer;
}
#slide ul li:hover {
    background-color: #00a1d6;
    border: 0;
    color: #fff;
}
#slide ul li.on {
    background-color: #00a1d6;
    border: 0;
    color: #fff;
}

footer {
    height: 400px;
    background-color: #c482af;
    line-height: 400px;
    background-color: #00a1d6;
}

